<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的布局</title>
<script type="text/javascript" src="./scripts/jquery-1.9.0.js"></script>

<script type="text/javascript" src="./scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jquery-ui/css/ui-lightness/jquery-ui-1.10.0.custom.css" />


<style type="text/css">

</style>	
<script type="text/javascript">

	$(document).ready(function() {
		jQuery( "button" ).button();
		 jQuery( "#searchArea" ).button({
	            text: true,
	            icons: {
	                primary: "ui-icon-play"
	            }
	        }).click(function(){
	        	var lable= $( this ).text();
	        	var options;
	            if ( $( this ).text() === "展开" ) {
	              options = {
	                label: "隐藏",
	                icons: {
	                  primary: "ui-icon-pause"
	                }
	              };
	            } else {
	              options = {
	                label: "展开",
	                icons: {
	                  primary: "ui-icon-play"
	                }
	              };
	            }
	            $( this ).button( "option", options );
	          //  $( this ).button( "refresh" );
	          
	        }
	        );
	});
</script>
</head>
<body>
	<button id='searchArea' >展开</button>
</body>

</html>